<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>

          </a>
        </div>
        <div class="title">Color Themes</div>
        <div class="right">
          <a class="link">Link</a>
        </div>
        <div class="title-large">
          <div class="title-large-text">Color Themes</div>
        </div>
      </div>
    </div>
    <div class="toolbar tabbar tabbar-icons toolbar-bottom">
      <div class="toolbar-inner">
        <div class="toolbar-pane">
          <a class="tab-link tab-link-active">
            <i class="icon f7-icons if-not-md">envelope_fill</i>
            <i class="icon material-icons md-only">email</i>
            <span class="tabbar-label">Inbox</span>
          </a>
          <a class="tab-link">
            <i class="icon f7-icons if-not-md">calendar_fill<span class="badge color-red">5</span></i>
            <i class="icon material-icons md-only">today<span class="badge color-red">5</span></i>
            <span class="tabbar-label">Calendar</span>
          </a>
          <a class="tab-link">
            <i class="icon f7-icons if-not-md">cloud_upload_fill</i>
            <i class="icon material-icons md-only">file_upload</i>
            <span class="tabbar-label">Upload</span>
          </a>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title block-title-medium">Layout Themes</div>
      <div class="block block-strong inset">
        <p>Framework7 comes with 2 main layout themes: Light (default) and Dark:</p>
        <div class="grid grid-cols-2 grid-gap">
          <div class="bg-color-white demo-theme-picker" @click=${()=>setScheme('light')}>
            ${theme === 'light' && $h`
            <label class="checkbox">
              <input type="checkbox" checked disabled />
              <i class="icon-checkbox"></i>
            </label>
            `}
          </div>
          <div class="bg-color-black demo-theme-picker" @click=${()=>setScheme('dark')}>
            ${theme === 'dark' && $h`
            <label class="checkbox">
              <input type="checkbox" checked disabled />
              <i class="icon-checkbox"></i>
            </label>
            `}
          </div>
        </div>
      </div>

      <div class="block-title block-title-medium">Default Color Themes</div>
      <div class="block block-strong inset">
        <p>Framework7 comes with ${colors.length} color themes set.</p>
        <div class="grid grid-cols-3 medium-grid-cols-4 large-grid-cols-5 grid-gap">
          ${colors.map((color) => $h`
          <div>
            <button class="button button-fill demo-color-picker-button button-round button-small color-${color}"
              @click=${()=>setColorTheme(color)}>${color}</button>
          </div>
          `)}
        </div>
      </div>

      <div class="block-title block-title-medium">Material Color Scheme</div>
      <div class="list list-strong inset">
        <ul>
          <li>
            <label class="item-content">
              <div class="item-inner">
                <div class="item-title">Monochrome</div>
                <div class="item-after">
                  <div class="toggle toggle-init">
                    <input type="checkbox" checked=${monochrome} @change=${(e)=>
                    setMdColorSchemeMonochrome(e.target.checked)} />
                    <span class="toggle-icon"></span>
                  </div>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-content">
              <div class="item-inner">
                <div class="item-title">Vibrant</div>
                <div class="item-after">
                  <div class="toggle toggle-init">
                    <input type="checkbox" checked=${vibrant} @change=${(e)=> setMdColorSchemeVibrant(e.target.checked)}
                    />
                    <span class="toggle-icon"></span>
                  </div>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>

      <div class="block-title block-title-medium">Custom Color Theme</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li class="item-content item-input">
            <div class="item-media align-self-flex-end">
              <div id="color-theme-picker-color" style="width: 28px; height: 28px; border-radius: 4px; background:
                var(--f7-color-primary)"></div>
            </div>
            <div class="item-inner">
              <div class="item-label">HEX Color</div>
              <div class="item-input-wrap">
                <input id="color-theme-picker" type="text" readonly placeholder="e.g. #ff0000" />
              </div>
            </div>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>
<script>
  let theme = 'light';
  let themeColor = $('html').css('--f7-color-primary').trim();

  export default (props, { $f7, $, $on, $onMounted, $update }) => {
    const colors = Object.keys($f7.colors).filter((c) => c !== 'primary' && c !== 'white' && c !== 'black');

    let colorPicker;
    let monochrome = false;
    let vibrant = false;

    const setScheme = (newTheme) => {
      $f7.setDarkMode(newTheme === 'dark');
      theme = newTheme;
      $update();
    }

    const setColorTheme = (newColor) => {
      themeColor = $f7.colors[newColor];
      $f7.setColorTheme(themeColor);
      colorPicker.setValue({
        hex: themeColor,
      });
      $update();
    }

    const setCustomColor = (newColor) => {
      themeColor = newColor;
      $f7.setColorTheme(newColor);
      $update();
    }

    const setMdColorScheme = () => {
      if (!vibrant && !monochrome) {
        $f7.setMdColorScheme('default');
      } else if (vibrant && !monochrome) {
        $f7.setMdColorScheme('vibrant');
      } else if (!vibrant && monochrome) {
        $f7.setMdColorScheme('monochrome');
      } else if (vibrant && monochrome) {
        $f7.setMdColorScheme('monochrome-vibrant');
      }
      $update();
    }

    const setMdColorSchemeMonochrome = (value) => {
      monochrome = value;
      setMdColorScheme();
    }
    const setMdColorSchemeVibrant = (value) => {
      vibrant = value;
      setMdColorScheme();
    }

    $on('pageInit', () => {
      let timeout;
      colorPicker = $f7.colorPicker.create({
        inputEl: '#color-theme-picker',
        targetEl: '#color-theme-picker-color',
        value: {
          hex: themeColor,
        },
        on: {
          change(cp, value) {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
              if (themeColor === value.hex) return;
              setCustomColor(value.hex);
            }, 200);
          },
        },
      });
    });
    $on('pageBeforeRemove', () => {
      colorPicker.destroy();
    });

    return $render;
  };

</script>
